<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<view class="news-info">
					<navbar backIconName="arrow-left" title="政策查询" :titleStyle="titleStyle"></navbar>
					<view :style="{height:statusHeight+'px'}"></view>
					<z-tabs :list="tabList" name-key="columnName" @change="tabsChange" />
				</view>
			</template>

			<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->

			<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
			<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
			<template #refresher="{refresherStatus}">
				<!-- 此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view -->
				<custom-refresher :status="refresherStatus" />
			</template>
			<!-- 自定义没有更多数据view -->
			<template #loadingMoreNoMore>
				<!-- 此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view -->
				<custom-nomore />
			</template>

			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="news-item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
				<view class="staff-card">
					<view class="left">
						<view class="top">
							<text
								style="font-size: 30rpx;color: #323232;font-weight: bold;margin-right: 20rpx;">{{item.policyTitle || '-'}}
							</text>
						</view>
						<text style="font-size: 28rpx;color: #666;">{{item.createTime || '-'}}</text>
					</view>
				</view>
			</view>
		</z-paging>

		<!-- 搜索按钮 -->
		<view class="search-but" @click="show">
			<image mode="widthFix" style="width: 40rpx;height: 40rpx; display: block;" src="../../static/search.png">
			</image>
		</view>

		<!-- 查询条件弹窗 -->
		<u-popup :show="showSearchPop" mode="top" :safeAreaInsetTop="true" :safeAreaInsetBottom="false"
			:closeOnClickOverlay="false" @close="close">
			<view class="login-form">
				<view class="header-title">
					<div class="back-but" @click="showSearchPop = false,showTime = false">
						<image mode="widthFix" src="../../static/back.png">
					</div>
					</image>
					<text>搜索条件</text>
					<div class="back-but" style="opacity: 0;">
						<image mode="widthFix" src="../../static/back.png">
						</image>
					</div>
				</view>
				<view class="contents">
					<u-search placeholder="请输入关键字" v-model="searchParams.title" :showAction='false'></u-search>
					<!-- <view class="title">
						<text>政策类别</text>
					</view>
					<view class="tabs">
						<text :class="[categoryActive == index ? 'active' : '', 'normal']"
							v-for="(item,index) in policyCategory" :key="index"
							@click="policyCategoryClick(item,index)">{{item.label}}</text>
					</view>
					<view class="title">
						<text>所属产业</text>
					</view>
					<view class="tabs">
						<text :class="[industryActive == index ? 'active' : '', 'normal']"
							v-for="(item,index) in belongIndustry" :key="index"
							@click="belongIndustryClick(item,index)">{{item.label}}</text>
					</view> -->
					<template v-if="tabList.length > 0 && tabList[tabIndex].columnName == '省内政策'">
						<view class="title">
							<text>省内政策</text>
						</view>
						<view class="time-select">
							<view class="prefix">
								<u-icon name="map"></u-icon>
							</view>
							<view style="flex: 1;" @click="showTree">
								<u-input v-model="searchParams.twoLevelName" border="none" readonly
									placeholder="请选择区域"></u-input>
							</view>
							<view class="prefix">
								<u-icon v-if="searchParams.twoLevelName" @click="cleartwoLevelName"
									name="close-circle"></u-icon>
							</view>
						</view>
					</template>
					<view class="title">
						<text>发布时间</text>
					</view>
					<view class="time-select">
						<view class="prefix">
							<u-icon name="calendar"></u-icon>
						</view>
						<view style="flex: 1;" @click="showTime = true">
							<u-input v-model="searchParams.time" border="none" readonly placeholder="请选择日期"></u-input>
						</view>
						<view class="prefix">
							<u-icon v-if="searchParams.time" @click="clearTime" name="close-circle"></u-icon>
						</view>
					</view>
					<view style="display: flex;align-items: center;margin-top: 40rpx;">
						<view style="flex: 1;">
							<u-button type="primary" :plain="true" text="重置" @click="reset"></u-button>

						</view>
						<view style="flex: 1;margin-left: 30rpx;">
							<u-button :throttleTime="1000" type="primary" text="确认" @click="submitSearch"></u-button>
						</view>
					</view>

				</view>


			</view>
		</u-popup>


		<!-- 日期组件 -->
		<u-datetime-picker ref="datetimePicker" v-model="releaseTime" :show="showTime" mode="date"
			@cancel="showTime = false" @confirm="selectTime"></u-datetime-picker>

		<!-- 倾诉对象所在区域 -->
		<!-- <u-picker :show="showLegalPerson" ref="uPickerArear" :columns="columnsArear" keyName="name"
			@confirm="confirmArear" @change="changeHandlerArear" @cancel="showLegalPerson = false"></u-picker> -->

		<pengTree ref="pengTree" :range="options" idKey="columnId" nameKey="columnName" allKey="value" :multiple="false"
			:cascade="false" :selectParent="true" :foldAll="false" confirmColor="#007aff" cancelColor="#757575"
			title="标题" titleColor="#757575" @cancel="treeCancel" @confirm="treeConfirm">
		</pengTree>


	</view>

</template>

<script>
	import pengTree from "@/components/peng-tree/peng-tree.vue"
	import {
		getTimeStamp,
	} from "@/utils/common.js"
	import {
		getNewsList,
	} from '@/api/pagesMall'
	import config from '@/api/config'
	let App = getApp();
	export default {
		components: {
			pengTree,
		},
		data() {
			return {
				showLegalPerson: true,
				columnsArear: [],
				columnDataArear: [],
				showSearchPop: false,
				dataList: [],
				tabIndex: 0,
				statusHeight: 44 + App.globalData.statusBarHeight,
				titleStyle: {
					color: "#ffffff",
					fontWeight: "bold",
					fontSize: "18px"
				},
				tabList: [],
				policyCategory: [{
					label: '全部',
					value: 0
				}, {
					label: '数字经济',
					value: 1
				}, {
					label: '产业扶持',
					value: 2
				}, {
					label: '两心',
					value: 3
				}, {
					label: '人才和就业',
					value: 4
				}, {
					label: '疫情扶持',
					value: 5
				}, {
					label: '绿色补助',
					value: 6
				}, {
					label: '发展奖励',
					value: 7
				}],
				belongIndustry: [{
					label: '全部',
					value: 0
				}, {
					label: '第一产业',
					value: 1
				}, {
					label: '第二产业',
					value: 2
				}, {
					label: '第三产业',
					value: 3
				}],
				categoryActive: 0,
				industryActive: 0,
				showTime: false,
				searchParams: {
					title: '',
					time: '',
					channelIds: '',
					twoLevelName: '',
				},
				releaseTime: "",
				options: [],
			};
		},
		created() {
			this.getData()
		},
		onLoad() {
			this.releaseTime = this.$u.date(new Date(), 'yyyy-mm-dd')
		},
		methods: {
			showTree() {
				//打开选择器
				this.$refs.pengTree._show();

			},
			treeCancel(e) {
				console.log("你点击了取消")
				console.log(e)
				//关闭选择器
				this.$refs.pengTree._hide();
			},
			treeConfirm(e) {
				console.log("你点击了确定")
				console.log(e)
				this.searchParams.twoLevelName = e[0].name
				this.searchParams.channelIds = e[0].id
				//关闭选择器
				this.$refs.pengTree._hide();

			},
			getData() {
				Promise.all([this.getNewsType()]).then(result => {
					/* 获取省内政策树结构 */
					let obj = this.tabList.find(item => item.columnName === '省内政策')
					this.getTree(obj.columnId)
					this.$refs.paging.reload();
				})
			},
			/* 获取新闻动态大类 */
			getNewsType() {
				return new Promise((resolve, reject) => {
					// uni.request({
					// 	url: config.baseUrlNews + '/channel/list',
					// 	method: 'GET',
					// 	data: {
					// 		parentId: 0
					// 	},
					// 	success: (res) => {
					// 		this.tabList = res.data.data.filter(item => (item.name == '国家政策' || item
					// 			.name ==
					// 			'省内政策' || item.name == '省外政策'))
					// 		this.searchParams.channelIds = this.tabList[0].id
					// 		resolve()
					// 	},
					// 	fail: (error) => {

					// 	}
					// });

					uni.request({
						url: config.baseUrlNews + '/business/column/rest/tree',
						method: 'GET',
						data: {},
						success: (res) => {
							this.tabList = res.data.data.filter(item => (item.columnName == '国家政策' ||
								item
								.columnName ==
								'省内政策' || item.columnName == '省外政策'))
							this.searchParams.channelIds = this.tabList[0].columnId
							resolve()
						},
						fail: (error) => {

						}
					});
				});
			},
			getTree(parentId) {
				uni.request({
					url: config.baseUrlNews + '/business/column/rest/sub/' + parentId,
					method: 'GET',
					data: {},
					success: (res) => {
						console.log(res.data.data, '改变了')
						this.options = res.data.data
					},
					fail: (error) => {

					}
				});
			},
			/* 倾诉对象所在区域 */
			changeHandlerArear(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPickerArear
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnDataArear[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirmArear(e) {
				this.showLegalPerson = false
				if (e.value[1] == undefined) {
					this.searchParams.twoLevelName = e.value[0].name
					this.searchParams.channelIds = e.value[0].id
				} else {
					this.searchParams.twoLevelName = e.value[0].name + '-' + e.value[1].name
					this.searchParams.channelIds = e.value[1].id
				}

			},
			getTimeStamp,
			/* 重置搜索条件 */
			reset() {
				this.searchParams.title = ''
				this.categoryActive = 0
				this.industryActive = 0
				this.searchParams.time = ''
				this.searchParams.twoLevelName = ''
				this.searchParams.channelIds = this.tabList[this.tabIndex].columnId
			},
			/* 选择事件 */
			selectTime(e) {
				this.searchParams.time = this.getTimeStamp(e.value, 1)
				this.showTime = false
			},
			/* 清空事件 */
			clearTime() {
				this.searchParams.time = ''
			},
			cleartwoLevelName() {
				this.searchParams.twoLevelName = ''
				this.searchParams.channelIds = this.tabList[this.tabIndex].columnId
			},
			show() {
				this.showSearchPop = true
			},
			close() {
				this.showSearchPop = false
			},
			/* 点击政策类别 */
			policyCategoryClick(item, index) {
				this.categoryActive = index
			},
			/* 点击所属产业 */
			belongIndustryClick(item, index) {
				this.industryActive = index
			},
			/* 查询 */
			submitSearch() {
				this.$refs.paging.reload()
				this.showSearchPop = false
			},
			tabsChange(index) {
				this.tabIndex = index;
				this.searchParams.channelIds = this.tabList[index].columnId
				if (this.tabList[index].columnName == '省内政策') {
					this.searchParams.twoLevelName = ''
				}
				//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				//调用reload时参数传true则代表reload时触发下拉刷新效果，不传或false则代表取消此效果
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize) {
				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					keyword: this.searchParams.title,
					createTimeStart: this.searchParams.time,
					createTimeEnd: '',
					columnId: this.searchParams.channelIds,
					containsSubColumn: true,
					channelOption: true,
				}
				if (this.searchParams.time != '') {
					// params.createTimeEnd = this.addOneDay(this.searchParams.time)
					params.createTimeEnd = this.searchParams.time
				} else {
					params.createTimeEnd = ''
				}
				uni.request({
					url: config.baseUrlNews + '/business/content/rest/getPageList',
					method: 'GET',
					data: params,
					success: (res) => {
						this.$refs.paging.complete(res.data.rows);
					},
					fail: (error) => {
						this.$refs.paging.complete(false);
					}
				});
			},
			addOneDay(d) {
				d = new Date(d);
				d = +d + 1000 * 60 * 60 * 24;
				d = new Date(d);
				var year = d.getFullYear();
				var mon = d.getMonth() + 1; //获取当前月份的日期
				var day = d.getDate();
				return year + '-' + (mon < 10 ? ('0' + mon) : mon) + '-' + (day < 10 ? ('0' + day) : day);
			},
			itemClick(item) {
				uni.navigateTo({
					url: '/pages-mall/pages/news/detail?columnId=' + item.contentId
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.search-but {
		padding: 20rpx;
		border-radius: 50%;
		position: fixed;
		right: 30px;
		bottom: 40px;
		// z-index: 9999;
		background-color: #2b65da;
	}

	.login-form {
		width: 100%;
		display: flex;
		flex-direction: column;

		.header-title {
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.back-but {
				width: 40px;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 22px;
					height: 22px;
					display: block;
				}
			}
		}

		.contents {
			padding: 30rpx;

			.time-select {
				display: flex;
				align-items: center;
				height: 38px;
				border: 1px solid #dadbde;
				border-radius: 4px;

				.prefix {
					width: 60rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}


			}

			.title {
				padding: 20px 0px 10px;
				font-size: 24rpx;
			}

			.tabs {
				display: flex;
				flex-wrap: wrap;
				font-size: 24rpx;

				.active {
					background: #2b65da !important;
					color: #fff !important;
				}

				.normal {
					padding: 3px 8px;
					border-radius: 5px;
					margin-right: 8px;
					margin-bottom: 8px;
					background: #f2f2f2;
					color: #323232;
				}
			}
		}


	}

	.news-item {
		display: flex;
		flex-direction: column;

		.staff-card {
			display: flex;
			align-items: center;
			padding: 20rpx;
			margin: 10rpx 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;

				.top {
					margin-bottom: 30rpx;
				}
			}
		}
	}
</style>